<template>
    <div class="SetGoodsWrap">
        <loginHeader style="position: fixed; top: 0; z-index: 50;"></loginHeader>
        <div style="background:#EF3015;position: fixed; top: 38px;left: 0; right: 0; z-index: 10;">
            <div class="goodsOnWrapHeader">
                <img class="logo" src="./../../assets/img/shopCenter/shopCenterLogo.png" alt="">
                <p class="goodsOnWrapHeaderTxt">供货商信息</p>
            </div>
        </div>
        <div style="height: 125px;"></div>
        <!--中心内容-->
        <div class="SetGoodsContent">
            <p class="SetGoodsContentA"><i class="el-icon-warning" style="color: #EF3015;font-size: 20px;"></i>供货商信息填写</p>
            <!--内容里的主题-->
            <div class="SetGoodsContentB">
                <div class="SetGoodsContentBtop">
                    <div class="ContentInp">
                        <p>商品名称</p>
                        <input type="text">
                        <span>*</span>
                    </div>
                    <div class="ContentInp">
                        <p>产品类型</p>
                        <input type="text">
                        <span>*</span>
                    </div>
                    <div class="ContentInp">
                        <p>联系人</p>
                        <input type="text">
                        <span>*</span>
                    </div>
                    <div class="ContentInp">
                        <p>联系电话</p>
                        <input type="text">
                        <span>*</span>
                    </div>
                    <div class="ContentInp">
                        <p>公司性质</p>
                        <input type="text">
                        <span>*</span>
                    </div>
                    <div class="ContentInp">
                        <p>公司地址</p>
                        <input type="text">
                        <span>*</span>
                    </div>
                    <div class="ContentInp">
                        <p>联系QQ</p>
                        <input type="text">
                        <span>*</span>
                    </div>
                    <div class="ContentInp">
                        <p>联系邮箱</p>
                        <input type="text">
                        <span>*</span>
                    </div>
                    <div class="ContentInp" id="upimg">
                        <p>营业执照</p>
                        <p class="upimage" v-if="!img" style="position: relative;">
                          <input style="opacity: 0;position: relative; z-index: 99999;" type="file" id="contentEtwoFile" class="" @change="contentEtwoImgsChange($event)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                          <span>请选择图片</span>
                        </p>
                        <img class="success_img" v-if="img" :src="upimg" alt=""/>
                        <div id="opc" v-if="img" @click="checkImg">点击查看大图</div>
                        <span>*</span>
                    </div>
                    <div class="ContentInp">
                        <p>品牌类型</p>
                        <input type="text">
                        <span>*</span>
                    </div>
                </div>
                <p class="SetGoodsContentBbottom" @click="subData">提交</p>
            </div>
            <p class="SetGoodsContentA SetGoodsContentC"><i class="el-icon-warning" style="color: #EF3015;font-size: 20px;"></i>客户经理</p>
            <div class="SetGoodsContentD">
                <div>
                    <i class="el-icon-service" style="color: #4cafe9;font-size: 20px; margin-right: 10px;"></i>张经理
                </div>
                <div>
                    <i class="el-icon-service" style="color: #4cafe9;font-size: 20px; margin-right: 10px;"></i>王经理
                </div>
            </div>
        </div>
        <loginFooter></loginFooter>
        <!--上传成功遮罩-->
        <div v-if="isZhezhao" class="SetGoodsWrapZhezhao">
            <div>
                <i class="el-icon-success"></i>上传成功,等待审核
            </div>
        </div>
        <!-- 查看大图 -->
        <div class="mask" v-if="banner" @click="checkImg"></div>
        <div class="mask_content" v-if="banner">
            <img :src="upimg" alt=""/>
            <div class="mask_content_btn" @click="delImg">
               删除图片
            </div>
        </div>
    </div>
</template>

<script>
    import  loginHeader  from "./LoginHeader";
    import  loginFooter  from "./LoginFooter";
    import axios from "axios";
    export default {
        name: "SetGoods",
        components:{
            loginHeader,
            loginFooter
        },
        data(){
            return{
                // 是否弹出遮罩
                isZhezhao: false,
                upimg:'',
                img:false,
                banner:false,
            }
        },
        methods:{
            // 提交数据
            subData(){
                this.isZhezhao = true;
            },
          // 宝贝详情图上传
          contentEtwoImgsChange(e){
            let that = this;
            let file = e.target.files[0];
            if(!/image\/\w+/.test(file.type)){
              alert('上传的不是图片');
              return false;
            }
            let param = new FormData();
            param.append('file', file, file.name);
            let config = {
              headers: {'Content-Type': 'multipart/form-data'}
            }
            axios.post('uploadImage',param,config)
              .then((res)=>{
                if(res.status == "000000"){
                  this.$message.closeAll();
                  this.$message({
                    showClose: true,
                    message: res.message,
                    type: 'success'
                  });
                  that.img=true;
                  that.upimg=res.data;
                 console.log(res);
                }else{
                  this.$message.closeAll();
                  this.$message({
                    showClose: true,
                    message: res.message,
                    type: 'error'
                  });
                }
              }).catch((res)=>{
              alert(res.message);
            });
          },
          //查看大图显示
          checkImg(){
              this.banner=!this.banner;
          },
          //删除图片
          delImg(){
            this.upimg="";
            this.img=false;
            this.banner=!this.banner;
          }
        },
        mounted(){

        }
    }
</script>

<style scoped>

     /* 营业执照上传 */
    .ContentInp .upimage{
          background: #FFFFFF;
          width: 400px;
          height: 35px;
          line-height: 35px;
          font-size: 16px;
          text-indent: 10px;
          font-family:"PingFang-SC-Heavy";
          font-weight:800;
          border: 1px solid #666666;
     }
      .ContentInp .upimage span{
         line-height: 0px;
         font-size: 12px;
         color: gray;
         position: absolute;
          top: 50%;
      }
     .ContentInp .success_img{
        line-height: 35px;
        width: 400px;
        height: 35px;
        position: relative;
        top: 10px;
     }
    #opc{
      margin: 0;
      padding: 0;
      border: 0;
      background: rgba(0, 0, 0, 0.5);
      width: 403px;
      line-height: 35px;
      text-align: center;
      z-index: 999;
      position: absolute;
      margin: -60px 0 0 155px;
      color: #FFFFFF;
      font-size: 20px;
    }
    /* 营业大图看 */
    .mask{
      background: rgba(0, 0, 0, 0.3);
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 888;
    }
    /* 遮罩样式 */
    .mask_content{
      background: #FFFFFF;
      width: 600px;
      height: 750px;
      position: fixed;
      margin: 0 auto;
      left: 50%;
      top: 50%;
      z-index: 88888;
      transform: translate(-50%, -50%);
    }
    .mask_content img{
       margin: 50px 100px;
       width: 400px;
    }
    .mask_content_btn{
        margin-left: 250px;
        width: 100px;
        text-align: center;
        color: red;
        font-size:20px;
        font-family:"PingFang-SC-Medium";
        border: 1px red solid;
        border-radius: 4px;
        font-weight:500;
        line-height: 40px;
        cursor: pointer;
    }
/* 上面结束 */

    .SetGoodsWrap{
        overflow: auto;
    }
    /*logo部分*/
    .goodsOnWrapHeader{
        width: 1200px;
        height: 90px;
        margin: 0 auto;
        overflow: hidden;
    }
    .goodsOnWrapHeader .logo{
        width: 61px;
        height: 56px;
        margin-top: 19px;
        float: left;
    }
    .goodsOnWrapHeaderTxt{
        float: left;
        font-size:26px;
        font-family:"PingFang-SC-Medium";
        font-weight:500;
        line-height: 120px;
        margin-left: 10px;
        color:#FFFFFF;
    }
    /* 中心内容 */
    .SetGoodsContent{
        height: 720px;
        width: 1200px;
        margin: 0 auto;
    }
    .SetGoodsContentA{
        font-size:18px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        color:rgba(51,51,51,1);
        margin-top: 50px;
    }
    /* 内容的主体 */
    .SetGoodsContentB{
        width: 1200px;
        height: 540px;
        border-top: 2px solid #EF3015;
        background:#EEEEEE;
        margin-top: 10px;
    }
    .SetGoodsContentBtop{
        height: 450px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .ContentInp{
        display: inline-block;
        width: 50%;
        height: 80px;
        line-height: 80px;
    }
    .ContentInp p{
        display: inline-block;
        width: 150px;
        font-size:24px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        color:rgba(51,51,51,1);
        text-indent: 20px;
    }
    .ContentInp input{
        width: 400px;
        height: 35px;
        line-height: 35px;
        font-size: 16px;
        text-indent: 10px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        border: 1px solid #666666;
    }
    .ContentInp span{
        display: inline-block;
        height: 50px;
        font-size: 45px;
        color: #EF3015;
        position: relative;
        top: 20px;
    }
    .SetGoodsContentBbottom{
        width: 243px;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        background: #ef3015;
        color: #FFFFFF;
        font-size: 23px;
        text-align: center;
        margin: 10px auto;
        cursor: pointer;
    }
    /* 下面客户经理 */
    .SetGoodsContentD{
        border-top: 2px solid #EF3015;
        padding-top: 30px;
    }
    .SetGoodsContentD div{
        display: inline-block;
        width: 100px;
        color: #00a8ff;
        font-size: 18px;
        cursor: pointer;
    }


    /* 上传成功遮罩 */
    .SetGoodsWrapZhezhao{
        position: fixed;
        z-index: 20;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(238,238,238,0.6);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .SetGoodsWrapZhezhao div{
        width:708px;
        height:303px;
        line-height: 303px;
        font-size:25px;
        text-align: center;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        color: #FFFFFF;
        background:rgba(251,100,81,1);
        border-radius:20px;
    }
    .SetGoodsWrapZhezhao div i{
        color: #FFFFFF;
        font-size: 30px;
        background: #FB6451;
        margin-right: 10px;
    }
</style>
